<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>简单的中文分词</title>
    <meta name="author" content="" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <meta name="keywords" content="简单的中文分词" />
    <meta name="description" content="简单的中文分词" />
    <script type="text/javascript" src="js/Convert_Pinyin.js"></script>
    <style>
		.container {
			width:90%;
			margin: 0 auto;
			text-align: center;
		}
		img {
			width:80px;
		}
    </style>
</head>
<body>
<div class="container">
	<h1>简单中文分词</h1>
	<textarea id="words" rows="3" cols="100"></textarea><br>
	<button onclick="fetchWords()">分词</button><br>
	<div id="resultDiv"></div>
	<div id="imgList"></div>
</div>
<script type="text/javascript">

var dict = {
	'zh':1,
	'ch':2,
	'sh':3,
	'ng':4
}

function codeIsUpper(code){
	return code === code.toUpperCase()
}

function fetchWords(){
	var words = document.getElementById("words").value
	var resultDiv = document.getElementById("resultDiv")

	var imgList = document.getElementById("imgList")

	var pyWord = pinyin.getFullChars(words)
	resultDiv.innerHTML = pyWord

	var list = ""

	for(var i=0;i<pyWord.length;i++){
		
		var code = pyWord.charAt(i)
		//过滤掉除数字和字母之外的符号
		if(code.match(/[0-9a-zA-Z]/)==null){
			continue
		}

		if(codeIsUpper(code) && list!=""){
			imgList.innerHTML += "<div>"+list+"</div>"
			list = ""
		}

		if(i+1<pyWord.length){
			var tryCode = code+pyWord.charAt(i+1)
			if(tryCode in dict){
				code = tryCode.toLowerCase()
				console.log(code)
				list += "<img src='images/"+code+".png'>"
				i=i+1
				continue
			}
		}
		
		code = code.toLowerCase()
		list += "<img src='images/"+code+".png'>"
		console.log(code)
	}
	//最后一个文字的拼音
	imgList.innerHTML += "<div>"+list+"</div>"
	  
}
</script>
</body>
</html>